import React,  { useCallback, useState } from 'react';
import classnames from 'classnames';
import './style.less';

const CommonTab = (props) => {
  const [tabKey, setTabKey] = useState(props.tabKey || 0);
  const { conf,  clickTab } = props;
  const click = useCallback((index) => {
    if(index === tabKey) return false;
    setTabKey(index);
    if(clickTab)clickTab(index);
  },[clickTab, tabKey])

  return (
      <div className="CommonTaba-box">
        {
          conf.map((item,index) => {
          return  <div key={item.value} onClick={()=>click(index)} className={classnames({"CommonTaba-item":true,"cur":index===tabKey})}>
              {item.url? <img alt="" className={"CommonTabaimg"+index} src={item.url[index===tabKey?1:0]} /> : null}
              <p>{item.value}</p>
            </div>
          })
        }
      </div>
  )
}

export default React.memo(CommonTab) 